<script>
  //存储vue页面逻辑js代码
  import {ref} from 'vue'
  export default{
    setup(){
      //非响应式数据：修改后VUE不会更新DOM
      //响应式数据：修改后VUE会更新DOM
      //VUE2中数据默认是响应式的
      //VUE3中数据要经过ref或者reactive处理后才是响应式的
      //ref是VUE3框架提供的一个函数,需要导入
      //let counter = 1
      //ref处理的响应式数据在js编码修改的时候需要通过.value操作
      //ref响应式数据在绑定到html上时不需要.value
      let counter = ref(1)
      function decrease(){
        counter.value--
      }
      function increase(){
        counter.value++
      }
      return{
        counter,
        decrease,
        increase
      }
    }
  }
</script>

<template>
  <div>
    <!-- template下只能由一个子标签 -->
     <!-- 编写html代码 -->
    <button @click="decrease()">-</button>
    {{ counter }}
    <button @click="increase()">+</button>
  </div>
</template>

<style scoped>
    /** 存储的是css代码! <style scoped> 是 Vue.js 单文件组件中用于设置组件样式的一种方式。
      它的含义是将样式局限在当前组件中，不对全局样式造成影响。 */
  button{
    border:1px solid red;
  }
</style>
